<template>
    <div class="palteCar">
        <!-- 挂牌车资产信息 -->
        <!-- <Collapse v-model="collcapital"> -->
            <!-- <Panel name="capital"> -->
            <div class="common_br">
               <h2 class="common_title extra_title">
                资产信息
                <span v-show="!isShowDetails" @click="save('plateCar')" class="saveBtn">保存</span>
               </h2>
                <!-- <div slot="content"> -->
                    <div class="common_content">
                        <Row>
                            <Col  :span="isShowDetails?'8':7">
                                <FormItem label="VIN号" prop="carVin">
                                    <Input v-model="vinNoComputed"   placeholder="请输入vin号" :disabled="isShowDetails||isReconsider" @on-change="turnVino"  @keyup.native="vinoValite"/>
                                </FormItem>
                            </Col>
                            <Col span="1">
                                <Button type="primary" size="small" class="plate_query" @click="queryCapital" v-show="!isShowDetails">查询</Button>
                            </Col>
                            <Col span="8">
                                <FormItem label="品牌" prop="brandName">
                                    <Input v-model="optionForm.brandName"  :disabled="isdisabled||isShowDetails||isReconsider" placeholder="根据vin号带出"/>
                                </FormItem>
                            </Col>
                            <Col span="8">
                                <FormItem label="车型" prop="modelName">
                                    <Input v-model="optionForm.modelName"  :disabled="isdisabled||isShowDetails||isReconsider" placeholder="根据vin号带出"/>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="8">
                                <FormItem label="款式" prop="styleName" style="width:calc(100% + 340px);" class="styleName">
                                    <Input v-model="optionForm.styleName" :disabled="isdisabled||isShowDetails||isReconsider" placeholder="根据vin号带出"/>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="8">
                                <FormItem label="指导价" prop="guidePrice">
                                    <Input v-model="optionForm.guidePrice"  :disabled="isdisabled||isShowDetails||isReconsider" placeholder="根据vin号带出"/><span  class="ml10">元</span>
                                </FormItem>
                            </Col>
                            <Col span="8">
                                <FormItem label="车辆价格" prop="salePrice">
                                    <Input v-model="optionForm.salePrice"  :disabled="isShowDetails||isReconsider"/><span class="ml10">元</span>
                                </FormItem>
                            </Col>
                            <Col span="8">
                                <FormItem label="使用性质" prop="carFunction">
                                    <Select v-model="optionForm.carFunction" placeholder="根据vin号带出"  :disabled="isdisabled||isShowDetails||isReconsider">
                                        <Option :value="item.value" v-for="(item,index) in carFunctionList" :key="index">{{item.title}}</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="8">
                                <FormItem label="发动机号" prop="engineNo">
                                    <Input v-model="optionForm.engineNo"  :disabled="isdisabled||isShowDetails||isReconsider" placeholder="根据vin号带出"/>
                                </FormItem>
                            </Col>
                            <Col span="8">
                                <place-cascade
                                :value="licenseValue"
                                :form="optionForm"
                                :label="licenseLabel"
                                :isDetailAddress="false"
                                :location="location"
                                :isShowDetails="isShowDetails"
                                :isReconsider="isReconsider"
                                :isNetLocation="isNetLocation"
                                ></place-cascade>
                            </Col>
                            <Col span="8">
                                <FormItem label="购买地点" prop="purchaseLocation" style="position: relative;">
                                    <Cascader :load-data="loadData"
                                        :data="dynamicLocation.length>0?dynamicLocation:location"
                                        v-model="optionForm.purchaseLocation"
                                        style="padding-top: 4px;"
                                        :disabled="isShowDetails||isReconsider"
                                    >
                                    </Cascader>
                                </FormItem>
                            </Col>
                        </Row>
                    </div>
                <!-- </div> -->
            </div>
            <!-- </Panel> -->
        <!-- </Collapse> -->
       <!-- 挂牌车车辆手续信息 -->
       <!-- <Collapse v-model="collproce"> -->
            <!-- <Panel name="proce"> -->
            <div class="common_br">
                <h2 class="common_title extra_title">车辆手续信息</h2>
                <!-- <div slot="content"> -->
                    <div class="common_content">
                    <Row>
                        <Col span="8">
                            <FormItem label="表显里程(公里)" prop="mileage">
                                <Input v-model="optionForm.mileage"   placeholder="根据vin号带出" :disabled="isShowDetails||isReconsider"/>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="车辆出厂日期" prop="vehicleMadeDate">
                                <DatePicker type="date" placeholder="根据vin号带出"   v-model="optionForm.vehicleMadeDate" :disabled="isdisabled||isShowDetails||isReconsider"></DatePicker>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="首次登记日期" prop="firstLandingDate">
                                <DatePicker type="date"    v-model="optionForm.firstLandingDate" placeholder="请选择首次登记日期" :disabled="isdisabled||isShowDetails||isReconsider"></DatePicker>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="8">
                            <FormItem label="车牌号" prop="licensePlate"   :rules="useCarNumber=='1'?plateValite:notplateValite">
                                <Input v-model="optionForm.licensePlate"   placeholder="请输入车牌号" :disabled="isShowDetails||isReconsider"/>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <!-- <FormItem label="首次上牌地点" prop="firstLicenseAddress">
                                <Input v-model="optionForm.firstLicenseAddress"  placeholder="请输入首次上牌地点"  :disabled="isShowDetails"/>
                            </FormItem> -->
                            <FormItem label="首次上牌地点" prop="firstLicenseAddress" style="position: relative;">
                                <Cascader :load-data="loadData"
                                    :data="location"
                                    v-model="optionForm.firstLicenseAddress"
                                    style="padding-top: 4px;"
                                    :disabled="isdisabled||isShowDetails||isReconsider"
                                >
                                </Cascader>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="所有人" prop="carBelongs">
                                <Input v-model="optionForm.carBelongs"   placeholder="自动带出" :disabled="isdisabled||isShowDetails||isReconsider"/>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="8">
                            <FormItem label="所有人证件号" prop="belongsCertNo">
                                <Input v-model="optionForm.belongsCertNo"   placeholder="自动带出" :disabled="isdisabled||isShowDetails||isReconsider" maxlength="20"/>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row v-if="false">
                        <Col span="10">
                            <FormItem label="总过户次数" prop="transNums">
                                <Input v-model="optionForm.transNums"   placeholder="请输入总过户次数" type="number" :disabled="isShowDetails||isReconsider"/>
                            </FormItem>
                        </Col>
                    </Row>
                <!-- </div> -->
            <!-- </Panel> -->
        <!-- </Collapse> -->
                </div>
             </div>
    </div>
</template>
<script>
import PlaceCascade from "@/components/place-cascade"
import {
    getCapitalInfo,
    noDealerGetAddressList
} from '_p/afs-apply/api/apply-report/personal/businessOption.js'
import {
    getDictDataByType
} from "_p/basic/api/admin/datadic.js"
import * as utils from '_p/afs-apply/assets/js/utils.js'
export default {
    name:"newCar",
    data(){
        let plateNoValiate = (rule, value, callback) => {
            if (value) {
                if (!utils.isPlateNo(value)) {
                    callback(new Error("至少7位字母,中文,数字"))
                    return;
                } else {
                    let firstchar = value.substr(0, 1);
                    let secondechar = value.substr(1, 1);
                    if (!/[\u4e00-\u9fa5]/.test(firstchar) || !/[A-Za-z]/.test(secondechar)) {
                        callback(new Error("车牌号首位为中文,第二位为英文"))
                        return;
                    }
                }
            }
            callback()
        }
        return{
             isdisabled:true,
             collcapital:"capital",
             collproce:"proce",

            //  purchaseLabel:"购买地点",
            //  purchaseValue:"purchaseLocation",

            licenseLabel:"上牌地点",
            licenseValue:"licenseLocation",
            carFunctionList:[],
            plateValite:[
                {required: true, message: "车牌号不能为空", trigger: "blur"},
                 {validator: plateNoValiate, trigger: "blur"}
            ],
            notplateValite:[
                {required: false, message: "车牌号不能为空", trigger: "blur"},
                 {validator: plateNoValiate, trigger: "blur"}
            ],

        }
    },
    props:{
        optionForm:{
            type:Object,
            require: true
        },
        location:{
            type:Array,
            require:true,
        },
        isShowDetails:{
            type:Boolean
        },
        isReconsider:{
            type:Boolean
        },
        dynamicLocation:{
            type:Array,
        },
        isNetLocation:{
            type:Boolean
        },
        useCarNumber:{
            type:String
        }
    },
    components:{
        PlaceCascade
    },
    computed : {
        vinNoComputed: {
            get: function(){
                return this.optionForm.carVin;
            },
            set : function(val){
                this.optionForm.carVin= val.toUpperCase();
            }
        },
        engineNoComputed:{
            get: function(){
                return this.optionForm.engineNo;
            },
            set : function(val){
                this.optionForm.engineNo= val.toUpperCase();
            }
        }
    },
    mounted(){
        console.log("业务选择-品牌车")
        this.initCarFunction();
    },
    methods:{
        turnVino(){
            this.resetPlateCar();
        },
        vinoValite(){
            this.optionForm.carVin=this.optionForm.carVin.replace(/[IQO]/g,'');
        },
        engineNoValite(){
            this.optionForm.engineNo=this.optionForm.engineNo.replace(/[IO]/g,'');
        },
       // 通过svn号查询挂牌车资产信息
        queryCapital(){
            let carVin = this.optionForm.carVin;
            if(!carVin) return;
            // VINN1531351313135
            getCapitalInfo({carVin}).then(res=>{
                if(res.code=="0000" && res.data.rows){
                    let d = res.data.rows[0];

                    this.optionForm.brandName = d.brand;//品牌
                    this.optionForm.modelName = d.model;//车型
                    this.optionForm.styleName = d.style;//款式
                    this.optionForm.guidePrice = d.guidancePrice;//指导价
                    this.optionForm.engineNo = d.engineNumber;//发动机号
                    this.optionForm.mileage = d.apparentMileage;//表显里程
                    this.optionForm.vehicleMadeDate = d.vehicleDeliveryDate;//车辆出厂日期
                    if(d.licensePlateNumber&&d.licensePlateNumber!='null'){
                        this.optionForm.licensePlate = d.licensePlateNumber;//车牌号
                    }
                    this.optionForm.carBelongs = d.owner;//所有人
                    this.optionForm.belongsCertNo = d.idNo;//所有人证件号
                    this.optionForm.firstLandingDate = d.firstRegistrationDate;//首次登记日期
                    // this.dealDataDic(d.originalUseNature,this.carFunctionList,"carFunction");//使用性质
                    this.optionForm.carFunction=d.originalUseNature;
                    this.optionForm.evaluationPrice=d.evaluationPrice;
                    // 首次上牌地点
                    let firstPlateAddress = [];
                    firstPlateAddress[0] = d.cardProvince ||'';
                    firstPlateAddress[1] = d.cardCity ||'';
                    this.$set(this.optionForm, "firstLicenseAddress", firstPlateAddress)

                    this.$emit('checkPlateCar');
                    let plateData={
                        brandId:d.brandId,
                        modelId:d.modelId,
                        styleId:d.styleId,
                        invoiceTime:d.invoiceTime,
                        useCarNumber:d.useCarNumber,
                    }
                    this.$emit('deliverPlateData',plateData);
                }
            })
        },
        // 保存挂牌车的资产信息
        save(type){
            this.$emit('saveCapitalInfo',type)
        },
        // 处理数据字典
        dealDataDic(data,dicList,type){
            console.log('data,',data,'dicList',dicList);
            if(data){
                dicList.forEach((item,index)=>{
                    if(item.title==data){
                        this.optionForm[type]=item.value
                    }
                })
            }else{
                this.optionForm[type]="";
            }
        },
        loadData(item, callback) {
            this.$emit('loadDataAddress',item,callback);
        },
        //初始化使用性质
        initCarFunction(){
            let param = {
                type: "carFunction"
            }
            getDictDataByType(param.type).then(res => {
                if (res.code === "0000") {
                    this.carFunctionList = res.data;
                }
            });
        },
        resetPlateCar(){
            this.$emit('resetPlateVinInfo');
        },
    }

}
</script>
<style scoped>

</style>
